<template>
 <!-- 所有身份的登录页面 -->
 <div class="container">
   <vue-particles
       color="#409EFF"
       :particleOpacity="0.7"
       :particlesNumber="60"
       shapeType="circle"
       :particleSize="6"
       linesColor="#409EFF"
       :linesWidth="1"
       :lineLinked="true"
       :lineOpacity="0.4"
       :linesDistance="150"
       :moveSpeed="3"
       :hoverEffect="true"
       hoverMode="grab"
       :clickEffect="true"
       clickMode="push">
   </vue-particles>

   <div class="login-weaper">
            <!-- 左边 -->
            <div class="login-left">
              <p class="title">社区养老服务管理系统</p>
            </div>
            <!-- 右边 -->
            <div class="login-right">
               <el-form :model="form" :rules="rules">
                  <div style="display: flex;">
                    <img src="../assets/logo.png" alt="标志" style="height: 30px;width: 30px;padding: 7px 20px 0px 100px; ">
                    <div class="title-right">欢迎使用!</div>
                  </div>
                  <el-form-item
                    prop="phone">
                    <el-input
                      v-model="form.phone"
                      placeholder="请输入手机号~"
                      prefix-icon="el-icon-user"
                      >
                    </el-input>
                  </el-form-item>

                  <el-form-item
                    prop="password">
                    <el-input
                      :type="isPass"
                      v-model="form.password"
                      placeholder="请输入密码~"
                      prefix-icon="el-icon-lock"
                      >
                      <i slot="suffix" class="el-icon-view" @click="apperPassWord"></i>
                    </el-input>
                  </el-form-item>

                  <!-- 身份选定下拉框 -->
                  <div class="status">
                      <el-form-item label="" label-width="94px" label-color="blue">
                        <el-select v-model="form.status" style="width: 100px;">
                          <el-option label="管理员" value="超级管理员"></el-option>
                          <el-option label="员工" value="员工"></el-option>
                          <el-option label="老人" value="老人"></el-option>
                        </el-select>
                      </el-form-item>
                  </div>

                  <el-form-item>
                    <el-button
                      type="success"
                      @click="onSubmit"
                      :loading="loading"
                      >
                      登录
                    </el-button>
                  </el-form-item>
               </el-form>
            </div>
      </div>
  </div>
</template>

<script>

    import axios from 'axios';
  // 避免传json格式的对象给服务器
  import Qs from 'qs'
  export default {
    name: 'Login',
    data() {
      return {
        // 用户名和密码的校验规则
        rules:{
          phone:[{required: true, message: '请输入手机号', trigger: 'blur' }],
          password:[{required: true, message: '请输入密码', trigger: 'blur' }]
        },
        // 表单数据收集
        form: {
          phone: '',
          password:'',
          status:'老人'
        },
        loading:false,     // 控制按钮是否显示"加载中"
        isPass:'password', // 控制是否显示密码
      }
    },
    methods: {
      // 收集form表单数据
      onSubmit() {

        // 1.检测用户输入是否合法
        if(this.form.phone.trim() === "" || this.form.password.trim() === ""){
            this.$message({
              message: '请输入正确的手机号或密码!',
              type: 'warning'
            });
            return;
        }

        // 显示按钮动画
        this.loading = true;

        // 发送请求,使用户登录
        axios.post('http://localhost:8088/home/login',Qs.stringify(this.form)).then(
          response => {
            if(response.data.result === "success"){
                // 提示一下登录成功
                this.$message({
                  message: '登录成功!',
                  type: 'success'
                });
                // 将用户数据存放到本次回话中
                sessionStorage.setItem('user',JSON.stringify(response.data.data));
                // 延时显示一下成功提示
                setTimeout(()=>{
                  if(response.data.data.status === '超级管理员' || response.data.data.status === '员工'){
                        // 表示登录成功,切换路由到首页
                        this.$router.push({path:'/home'})
                  }
                  if(response.data.data.status === '老人'){
                        // 表示登录成功,切换到前台页面
                        this.$router.push({path:'/index'})
                  }
                },100);

            }else{
              // 提示一下用户名或密码错误
              this.$message.error(response.data.msg);
              this.loading = false;           // 关闭按钮动画
            }
          },
          error => {
              if(error.response.status === 701){
                  window.location.replace('http://localhost:8080/');
              }else{
                  //错误信息打印到控制台
                  console.log(error.message);
                  this.loading = false;           // 关闭按钮动画
              }
          }
        );
      },
      // 显示密码
      apperPassWord(){
        this.isPass = this.isPass === 'password'?'':'password';
      }
    },
  }
</script>


<style lang="less" scoped>
  .container{
      height: 100vh;
      background-image: url(../assets/backgroud.png);
      background-repeat: no-repeat;
      background-position: center;

      display: flex;
      justify-content: center;
      align-items: center;
    .login-weaper{
      width: 70%;
      height: 500px;
      position: relative;
      min-height: 500px;
      box-shadow: -4px 5px 10px rgb(0 0 0 / 40%);
      display: flex;

      .login-left{
        height: 100%;
        width: 50%;
        background-color: rgba(255, 255, 255, 0.1490196078);
        background-size: 100% 100%;
        .title {
            font-weight: 600;
            color: #fff;
            text-shadow: 3px 3px 3px rgb(5 5 5 / 50%);
            background-image: url(../assets/login-border.png);
            background-size: 100% 100%;
            padding: 30px 30px;
            font-size: 34px;
            text-align: center;
            margin: 50px;
            margin-top: 180px;
        }
      }
      .login-right{
        height: 100%;
        width: 50%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-form{
            width: 65%;
            height: 65%;
            background-color: #fff;

            .title-right{
              font-size: 30px;
              font-weight: 500;
              color: rgb(0, 0, 0);
              margin-bottom: 20px;
            }

            .status{
              padding-left: 50%;
            }
          }
          .el-button{
            width: 100%;
          }
          i{
            cursor: pointer;
            padding-right: 5px;
          }
      }
    }
  }
   #particles-js {
     width: 100%;
     height: calc(100% - 100px);
     position: absolute;
   }


</style>
